<#include "/inc/top.html" />
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<#include "/inc/script.html" />
<#include "/inc/header.html" />
<script type="text/javascript" src="${ctx}/lib/echart/echarts.min.js"></script>
<script type="text/javascript" src="${ctx}/lib/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="${ctx}/lib/laydate/laydate.js"></script>
<style type="text/css">
	div .tab{
		width:50%;
		height:500px;
		float:left;
		display:inline;
	}
	.hideDiv{
		display: none;
	}
	.margin-top{
		margin-top: 16px;
	}
	.text-verAlign{
		height: 36px;
    	line-height: 36px;
	}
</style>
</head>
<body class="theme-blue">
<!--[if lt IE 7 ]> <body class="ie ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie ie7 "> <![endif]-->
<!--[if IE 8 ]> <body class="ie ie8 "> <![endif]-->
<!--[if IE 9 ]> <body class="ie ie9 "> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> 
<!--<![endif]-->

<div class="content">
<div class="header">
<ul class="breadcrumb">
	<li class="active">报表查看</li>
</ul>
</div>
<div class="main-content">
<!-- tabs -->
<ul class="nav nav-tabs">
	<li class="active"><a href="#report" data-toggle="tab">报表查看</a></li>
</ul>
<div id="report" class="tab-pane active">
<div class="panel panel-default">
<div class="panel-body">

<div class="row">
<div id="buttons" class="col-md-8 col-md-offset-2">
<button id="device_import" onclick='initEcharts("device_import")' type="button" class="btn btn-default btn-info">设备总数量</button>
<button id="device_active" onclick='initEcharts("device_active")' type="button" class="btn btn-default">设备激活数</button>
<button id="device_day_import" onclick='initEcharts("device_day_import")' type="button" class="btn btn-default">当日设备导入数</button>
<button id="device_day_active" onclick='initEcharts("device_day_active")' type="button" class="btn btn-default">当日设备激活数</button>
<button id="view_user" onclick='initEcharts("view_user")' type="button" class="btn btn-default">观看用户数量</button>
<button id="view_count" onclick='initEcharts("view_count")' type="button" class="btn btn-default">观看次数</button>
<button id="view_duration" onclick='initEcharts("view_duration")' type="button" class="btn btn-default">观看时长(日期)</button>
<button id="view_duration_per_minute" onclick='initEcharts("view_duration_per_minute")' type="button" class="btn btn-default">观看时长(分钟)</button>
<button id="device_online" onclick='initEcharts("device_online")' type="button" class="btn btn-default">在线设备数量</button>
<script type="text/javascript">


	function changeBtnClickStyle(btnId)
	{
		$(".btn").removeClass("btn-info");
		$("#"+btnId).addClass("btn-info");
	}
	
	var totalType = "device_import";
	
	function changeStat(chart,region,statType){
		chart.showLoading();    //数据加载完之前先显示一段简单的loading动画
		if(statType)
		{
			totalType = statType;
		}
		var url = '${ctx}/report/getMasterData';
		//type=1分节点统计的数据  type=0主节点统计的数据
		var params = {"region":region,"totalType":totalType};
		if(totalType=='view_user' || totalType=='view_count' || totalType=='view_duration' || totalType=='device_online')
		{
			url = '${ctx}/report/getNodeData';
			
		}else if(totalType === 'view_duration_per_minute'){
			
			url = '${ctx}/report/getViewDurationPerMinute';
			
			params.startTime = $("#startTime").val();
			params.endTime = $("#endTime").val();
			params.timeType = $("#timeType :selected").val();
		}
		var timeSz = [];    //类别数组（实际用来盛放X轴坐标值）    
     	var numSz1 = [];
	     $.ajax({
	         type: 'post',
	         url: url,//请求数据的地址
	         data: params,
	         dataType: "json",        //返回数据形式为json
	         success: function (result) {
	             //请求成功时执行该函数内容，result即为服务器返回的json对象           
	
	             $.each(result.data, function (index, item) {
	             	timeSz.push(item.statDate);    //挨个取出类别并填入类别数组
	             	numSz1.push(item.count);
	             });
	             chart.hideLoading();    //隐藏加载动画
	             chart.setOption({        //加载数据图表
	                 xAxis: {
	                     data: timeSz
	                 },
	                 yAxis:{
	                 	name: (totalType == 'view_duration') ? '数量 (单位: 秒)' : '数量'
	                 },
	                 series: [{                    
	                     data: numSz1
	                 }]
	             });
	         },
	         error: function (errorMsg) {
	             alert("图表请求数据失败!");
	             chart.hideLoading();
	         }
	     });
	}
	
	function initChart(chart,text)
	{
		chart.setOption({
         title: {
             text: text
         },
         tooltip: {
             trigger: 'axis'
         },
         legend: {
             data: []
         },
         toolbox: {
             show: true,
             feature: {
                 mark: { show: true },
                 dataView: { show: true, readOnly: false },
                 magicType: { show: true, type: ['line', 'bar'] },
                 restore: { show: true },
                 saveAsImage: { show: true }
             }
         },
         calculable: true,
         xAxis: {
             type: 'category',
             boundaryGap: false, //取消左侧的间距
             data: []
         },
         yAxis: {
             type: 'value',
             splitLine: { show: false },//去除网格线
             name: '数量'
         },
         dataZoom:[
         	{
         		type: 'slider',
                 start: 0,
                 end: 100
         	}
         ],
         series: [{
             name: '数量',
             type: 'line',
             symbol: 'emptydiamond',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
             data: []
         }]
     });
	}
	
	//加载页面时, 查询节点数, 并初始化图表
	function initRegion(){
		var datas;
		$.ajax({
         type: 'get',
         url: "${ctx}/report/listRegion",//请求数据的地址
         async: false,
         success: function (result) {
             //请求成功时执行该函数内容，result即为服务器返回的json对象           
				datas = result.data;
         },
         error: function (errorMsg) {
             //请求失败时执行该函数
             alert("请求区域数据失败!");
             chart.hideLoading();
         }
     });
		return datas;
	}
	
	//初始化整个页面
	function initView(type){
		var datas = initRegion();
		if(null == datas || undefined == datas || datas.length == 0){
			alert("未找到区域数据.");
			return;
		}
		totalType = type;
		var content = "";
		//1. 初始化页面
		
		for(var i = 0 ; i < datas.length; i++){
			content += "<div id='" + datas[i].id + "' class='tab'></div>\r\n";
		}
		content += "<div id='all' class='tab'></div>";
		$("#reportBox").empty().append(content);
		$("#showPerMinute").hide();
	}
	
	//构造图表
 	function initEcharts(type){
		
		//修改按钮样式
		changeBtnClickStyle(type);
		
 		var datas = initRegion();
 		$("#showPerMinute").hide();
 		
 		if("view_duration_per_minute" === type){
 			$("#showPerMinute").show();
 			if(!datetimePickerIsInitFlag)
 				initDateTimePicker();
 		}
 		
 		//初始化子图表数据
 		for(var i = 0 ; i < datas.length; i++){
 			var chart = echarts.init(document.getElementById(datas[i].id));
 			initChart(chart, datas[i].regionName + "节点");
 			changeStat(chart, datas[i].id, type);
 		}
 		
 		//初始化总图表数据
 		var myChart = echarts.init(document.getElementById("all"));
 		initChart(myChart,"总和");
	    changeStat(myChart,"");
	}
	
	var datetimePickerIsInitFlag = false;
	function initDateTimePicker(){
		var date = new Date();
		laydate.render({
		  elem: '#startTime', //指定元素
		  type: 'datetime',
		  value: getTimeStr(1),
		  format: "yyyy-MM-dd HH:mm",
		  isInitValue: false
		});
		laydate.render({
		  elem: '#endTime', //指定元素
		  type: 'datetime',
		  value: getTimeStr(null),
		  format: "yyyy-MM-dd HH:mm",
		  isInitValue: false
		});
		datetimePickerIsInitFlag = true;
	}
	
	function getTimeStr(index){
		var date;
		if(index == null || index == 0 || index == undefined || index ==  ''){
			date = new Date();
		}else{
			date = new Date(new Date() - 24 * 60 * 60 *1000 * index);
		}
		return   date.getFullYear() 
			   + '-'
			   + (date.getMonth()+1)
			   + '-'
			   + date.getDate()
			   + ' '
			   + date.getHours()
			   + ":"
			   + date.getMinutes();
				
	}
 		
 	$(function(){
 		//初始化默认页面
 	 	initView("device_import");
 	 	$("#device_import").click();
 	})
 	
 </script>
</div>
</div>
<div class="row margin-top" id="showPerMinute">
	<div class="col-md-1 text-right text-verAlign">
		开始时间:
	</div>
	<div class="col-md-2 "> 
		<input type="text" id="startTime" class="form-control"/>
	</div>
	<div class="col-md-1 text-right text-verAlign"> 
		结束时间:
	</div>
	<div class="col-md-2"> 
		<input type="text" id="endTime" class="form-control"/>
	</div>
	<div class="col-md-1 text-right text-verAlign"> 
		时间间隔:
	</div>
	<div class="col-md-2"> 
		<select id="timeType" class="form-control">
		  <option value ="0" selected="selected">分钟</option>
		  <option value ="1">小时</option>
		</select>
	</div>
	<div>
		<button class="btn btn-default" onclick="initEcharts('view_duration_per_minute')">
			<span class="glyphicon glyphicon-search"></span>查询
		</button>
	</div>
</div>
<div id="reportBox" class="row">
	
</div>
</div>
</div>
<!-- tabs end!-->
</div>
</div>
</body>
</html>

